.box{
    width: 400px;
    height: 400px;
    outline: 1px solid red;
    margin:50px auto;
    position: relative;
}
.balls{
    height: 20px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.smallball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #000;
    float: left;
}
.line-ball{
    /* background-color: rgb(157, 172, 144); */
    position: absolute;
    transform-origin:10px 0 ;
    /* transform: rotate(50deg); */
    
}
.line-ball.one{
    left:130px;
    animation: yaobai 2s ease-in-out infinite ;
}
.line-ball.two{
    left: 250px;
    animation: yaobai2 2s ease-in-out infinite ;
    /* animation: yaobai 2s  infinite reverse ; */
}
.line-ball .smallball{
    float: none;
}
.line{
    height: 190px;
    width: 1px;
    background-color: #000;
    transform: translateX(9.5px);
    
}
@keyframes yaobai{
    from {
        transform: rotate(0);
    }
    25%{
        transform: rotate(30deg);
    }
    50%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(0);
    }

}
@keyframes yaobai2{
    from {
        transform: rotate(0);
    }
    
    50%{
        transform: rotate(0);
    }
    75%{
        transform: rotate(-30deg);
    }
    100%{
        transform: rotate(0);
    }

}
